<template>
  <div class="detailinfo-content">
    <div class="box1">
      <div class="addr-box">
        <van-tag color="#FF5654" text-color="#fff">{{detailInfo.isCommercial | commercialState}}</van-tag>
        <span>{{detailInfo.region}}</span>
        <span>{{detailInfo.bedroom}}室<span>{{detailInfo.livingroom}}厅</span><span v-if="detailInfo.isToilet == 1">{{detailInfo.isToilet}}卫</span></span>
      </div>
      <div class="price-box">
        <span>{{detailInfo.price | priceSubstr}}</span>
        <span>元/月</span>
        <span>月付</span>
      </div>
      <div class="advertising-box">
        <span>发布时间 :</span>
        <span>{{detailInfo.publishTime}}</span>
      </div>
      <div class="baseinfo-box">
        <div>
          <p>
            {{detailInfo.bedroom}}室<span>{{detailInfo.livingroom}}厅</span><span v-if="detailInfo.isToilet == 1">{{detailInfo.isToilet}}卫</span>
          </p>
          <p>房型</p>
        </div>
        <div>
          <p>{{detailInfo.area}}m²</p>
          <p>面积</p>
        </div>
        <div>
          <p>第{{detailInfo.floor}}层</p>
          <p>楼层</p>
        </div>
        <div>
          <p>{{detailInfo.direction | derectionState}}</p>
          <p>朝向</p>
        </div>
      </div>
      <div class="specific-addr-box">
        <p>具体地址 :</p>
        <p>{{detailInfo.address}}</p>
      </div>
    </div>
    <div class="box2">
      <div class="basefaclity-box">
        <p>房屋介绍</p>
        <p>本房源位于{{detailInfo.province}}{{detailInfo.city}}{{detailInfo.region}}</p>
        <div>
          <p :class="{isactive:baseFaclity.iceBox== 0}">
            <van-icon name="success" v-if="baseFaclity.iceBox== 1" />
            <van-icon name="cross" v-else />
            <span>冰箱</span>
          </p>
          <p :class="{isactive:(baseFaclity.washMachine == 0)}">
            <van-icon name="success" v-if="baseFaclity.washMachine== 1" />
            <van-icon name="cross" v-else />
            <span>洗衣机</span>
          </p>
          <p :class="{isactive:baseFaclity.heater== 0}">
            <van-icon name="success" v-if="baseFaclity.heater== 1" />
            <van-icon name="cross" v-else />
            <span>热水器</span>
          </p>
          <p :class="{isactive:baseFaclity.wideBand== 0}">
            <van-icon name="success" v-if="baseFaclity.wideBand== 1" />
            <van-icon name="cross" v-else />
            <span>宽带</span>
          </p>
          <p :class="{isactive:baseFaclity.sofa== 0}">
            <van-icon name="success" v-if="baseFaclity.sofa== 1" />
            <van-icon name="cross" v-else />
            <span>沙发</span>
          </p>
          <p :class="{isactive:baseFaclity.smokeMachine== 0}">
            <van-icon name="success" v-if="baseFaclity.smokeMachine== 1" />
            <van-icon name="cross" v-else />
            <span>油烟机</span>
          </p>
          <p :class="{isactive:baseFaclity.gasStove== 0}">
            <van-icon name="success" v-if="baseFaclity.gasStove== 1" />
            <van-icon name="cross" v-else />
            <span>燃气灶</span>
          </p>
          <p :class="{isactive:baseFaclity.cook== 0}">
            <van-icon name="success" v-if="baseFaclity.cook== 1" />
            <van-icon name="cross" v-else />
            <span>可做饭</span>
          </p>
          <p :class="{isactive:baseFaclity.video== 0}">
            <van-icon name="success" v-if="baseFaclity.video== 1" />
            <van-icon name="cross" v-else />
            <span>电视</span>
          </p>
          <p :class="{isactive:baseFaclity.airConditioner== 0}">
            <van-icon name="success" v-if="baseFaclity.airConditioner== 1" />
            <van-icon name="cross" v-else />
            <span>空调</span>
          </p>
          <p :class="{isactive:baseFaclity.wardrobe== 0}">
            <van-icon name="success" v-if="baseFaclity.wardrobe== 1" />
            <van-icon name="cross" v-else />
            <span>衣柜</span>
          </p>
          <p :class="{isactive:baseFaclity.bed== 0}">
            <van-icon name="success" v-if="baseFaclity.bed == 1" />
            <van-icon name="cross" v-else />
            <span>床铺</span>
          </p>
          <p :class="{isactive:baseFaclity.isWc== 0}">
            <van-icon name="success" v-if="baseFaclity.isWc== 1" />
            <van-icon name="cross" v-else />
            <span>卫生间</span>
          </p>
          <p :class="{isactive:baseFaclity.doorLock== 0}">
            <van-icon name="success" v-if="baseFaclity.doorLock== 1" />
            <van-icon name="cross" v-else />
            <span>智能门锁</span>
          </p>
          <p :class="{isactive:baseFaclity.balcony== 0}">
            <van-icon name="success" v-if="baseFaclity.balcony== 1" />
            <van-icon name="cross" v-else />
            <span>阳台</span>
          </p>
          <p :class="{isactive:baseFaclity.heating== 0}">
            <van-icon name="success" v-if="baseFaclity.heating== 1" />
            <van-icon name="cross" v-else />
            <span>暖气</span>
          </p>
        </div>
      </div>
      <div class="housebrief-box">
        <p>房源简介</p>
        <p>{{detailInfo.brief}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    detailInfo: {
      type: Object,
      default: () => {},
    },
    baseFaclity: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    rentState(val) {
      return val == "1" ? "已出租" : "未出租";
    },
    priceSubstr(val) {
      return (val - 0).toFixed(2);
    },
    commercialState(val) {
      return val == 1 ? "商住" : "民住";
    },
    toiletState: function (val) {
      return val == 1 ? "独卫" : "非独卫";
    },
    derectionState(val) {
      return val == 1
        ? "朝东"
        : val == 2
        ? "朝南"
        : val == 3
        ? "朝西"
        : val == 4
        ? "朝北"
        : val == 5
        ? "东南"
        : val == 6
        ? "东北"
        : val == 7
        ? "西南"
        : "西北";
    },
    substrAddress(val){
      return val.substr(val.length-1)
    }
  },
};
</script>

<style scoped>
.detailinfo-content {
  background-color: #efefef;
}
.box1,
.box2 {
  padding: 20px;
  background-color: #fff;
}
.box1 {
  margin-bottom: 10px;
}
.addr-box {
  font-size: 17px;
  font-weight: 550;
  height: 20px;
  line-height: 20px;
  margin-bottom: 15px;
}
.addr-box > span {
  margin-right: 10px;
}
.van-tag {
  height: 20px;
  font-size: 13px;
  font-weight: normal;
}
.price-box {
  margin-bottom: 10px;
}
.price-box span:nth-child(1) {
  font-size: 20px;
  font-weight: 700;
  color: #ff5654;
  margin-right: 4px;
}
.price-box span:nth-child(n + 2) {
  font-size: 13px;
  color: #ff5654;
  margin-right: 4px;
}
.price-box span:nth-child(3) {
  color: #aaa;
}
.advertising-box {
  height: 30px;
  /* background-color: rgb(82, 212, 82); */
  border-radius: 3px;
  margin-bottom: 15px;
  line-height: 30px;
  font-size: 13px;
}
.advertising-box > span {
  margin-right: 5px;
}
.baseinfo-box {
  display: flex;
  text-align: center;
  align-items: center;
  height: 75px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}
.baseinfo-box > div {
  flex: 1;
}
.baseinfo-box > div p:nth-child(1) {
  font-size: 14px;
  font-weight: 550;
  margin: 5px;
}
.baseinfo-box > div p:nth-child(2) {
  font-size: 12px;
  color: #aaa;
}
.specific-addr-box {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.specific-addr-box > p:nth-child(1) {
  margin-right: 5px;
  font-weight: 550;
  font-size: 14px;
}
.specific-addr-box > p:nth-child(2) {
  font-size: 12px;
  color: #aaa;
}

.basefaclity-box > p:nth-child(1) {
  font-size: 16px;
  font-weight: 550;
  padding-bottom: 10px;
}
.basefaclity-box > p:nth-child(2) {
  font-size: 13px;
  color: #666;
  padding-bottom: 10px;
}
.basefaclity-box > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.basefaclity-box > div p {
  display: flex;
  align-items: center;
  width: 25%;
  font-size: 12px;
  margin-bottom: 5px;
}
.basefaclity-box > div p > span {
  margin-left: 4px;
}
.isactive {
  color: #ccc;
}
.housebrief-box {
  margin-top: 15px;
}
.housebrief-box p:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.housebrief-box p:nth-child(2) {
  font-size: 13px;
  text-indent: 2em;
}
</style>